<template>
  <div>
    <div style="margin-top: 10px; margin-bottom: 20px">
      <el-date-picker
          v-model="tvalue"
          type="date"
          placeholder="选择日期"
          format="YYYY 年 MM 月 DD 日"
          value-format="YYYY-MM-DD"
          style="margin-right: 5px">
      </el-date-picker>
      <el-select placeholder="请选择任务类型" clearable="true" style="margin-right: 5px" v-model="type">
        <el-option
            v-for="item in typecase"
            :key="item"
            :label="item"
            :value="item">
        </el-option>
      </el-select>
      <!--      <el-button type="primary" style="margin-left: 10px" @click = "search">查询</el-button>-->
      <el-button :icon="Search" circle style="margin-left: 10px" @click = "search"/>

    </div>
    <el-divider></el-divider>
    <el-scrollbar>
      <el-table
          ref="multipleTable"
          tooltip-effect="dark"
          :data="tableData"
          style=" width: 100%"
          @selection-change="selectionChange"
          @select="select"
          height="542px"
          row-key="distributionTaskOrderId"
          border

      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" :index="getIndex" width="110" label="序号"/>
        <el-table-column prop="distributionTaskOrderId" width="250px" label="任务号"/>
        <el-table-column prop="customerName" width="210px" label="客户姓名"/>
        <el-table-column prop="address" width="360px" label="投递地址"/>
        <el-table-column sortable prop="overTime" width="240px" label="要求完成日期"/>
        <el-table-column prop="taskType" width="150px" label="任务类型">
          <template v-slot="scope">
            <el-tag effect="dark" size="large" type="success" v-if="scope.row.taskType === '送货'">送货</el-tag>
            <el-tag effect="dark" size="large"  v-else-if="scope.row.taskType==='收款'">收款</el-tag>
            <el-tag effect="dark" size="large" type="info" v-else-if="scope.row.taskType==='退货'">退货</el-tag>
            <el-tag effect="dark" size="large" type="warning" v-else-if="scope.row.taskType==='换货'">换货</el-tag>
            <el-tag effect="dark" size="large" type="warning" v-else-if="scope.row.taskType==='送货收款'">送货收款</el-tag>

          </template>
        </el-table-column>
        <!--        <el-table-column prop="customerName" label="客户姓名">-->
        <!--          <template #default="scope">-->
        <!--            <el-button size="small" type="success" @click="lock(scope.row)">查看答者</el-button>-->
        <!--            <el-button size="small" type="warning" @click="mod(scope.row)">编辑</el-button>-->
        <!--            <el-button size="small" type="danger" @click="dele(scope.row)">删除</el-button>-->
        <!--          </template>-->

        <!--        </el-table-column>-->
      </el-table>
      <el-pagination
          background
          :page-size=pageSize
          :page-sizes="[10,20,30,40]"
          layout="total, prev, pager, next"
          :total=totalSize
          @current-change="pageChange"
          style="margin-top: 15px;float: left"
          :current-page=pageNow


      >
      </el-pagination>
      <el-button type="primary" style="float: right;margin-top: 12px;margin-right: 50px" size="large" @click = "forsure">回执录入</el-button>

    </el-scrollbar>

    <el-dialog v-model="Visible" title="回执录入" width="40%" center>
      <div style="height: 400px;overflow: auto">
          <el-form :rules="rules" :model="receiptData" ref="receiptForm" label-width="100px" style="margin-right: 10px">
            <el-form-item label="配送单号" prop="did">
              <el-input v-model="receiptData.distributionTaskOrderId" disabled></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="customerName">
              <el-input v-model="receiptData.customerName"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="tele">
              <el-input v-model="receiptData.tele"></el-input>
            </el-form-item>
            <el-form-item label="任务分站" prop="addressId">
              <el-input v-model="receiptData.warehouseId" disabled></el-input>
            </el-form-item>
            <el-form-item label="送货地址" prop="address" v-show="(receiptData.taskType == '送货' || receiptData.taskType == '换货' || receiptData.taskType == '送货收款')">
              <el-input v-model="receiptData.address"></el-input>
            </el-form-item>
            <el-form-item label="退货地址" prop="address" v-show="(receiptData.taskType == '退货')">
              <el-input v-model="receiptData.address"></el-input>
            </el-form-item>
            <el-form-item label="送货员ID" prop="postman" v-show="(receiptData.taskType == '送货收款')">
              <el-input v-model="receiptData.postmanId" disabled></el-input>
            </el-form-item>
            <el-form-item label="商品信息">

              <el-col :span="10" v-for="item in shoppingList">
                <el-card  :body-style="{ padding: '0px' }" style="margin-right: 15px;margin-bottom: 10px">
                  <img
                      src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                      class="image"
                      style="width: 100%;height: 100px"
                  />
                  <div style="padding: 5px">{{item.shoppingName + ':' + item.shoppingNum}}</div>
                </el-card>
              </el-col>



            </el-form-item>
            <el-form-item label="任务类型" prop="taskType">
              <el-tag type="success">{{receiptData.taskType}}</el-tag>
            </el-form-item>
            <el-form-item label="任务状态" prop="taskState">
              <el-select v-model="receiptData.taskState">
                <el-option key="完成" label="完成" value="完成"/>
                <el-option key="失败" label="失败" value="失败"/>
              </el-select>
            </el-form-item>
            <el-form-item label="客户满意度" prop="rate">
              <el-rate
                  v-model="receiptData.rate"
                  :texts="['非常不满意', '不满意', '一般', '满意', '非常满意']"
                  text-color="#ff9900"
                  show-text
              />
            </el-form-item>
            <el-form-item label="备注" prop="notes">
              <el-input
                  v-model="receiptData.notes"
                  :rows="2"
                  type="textarea"
                  placeholder="请输入备注"
              />
            </el-form-item>
          </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="danger" @click="Visible = false">取消</el-button>
          <el-button type="primary" @click="addReceipt('receiptForm')">确认</el-button>
        </span>
      </template>
    </el-dialog>


  </div>
</template>

<script>
import axios from "axios";
import {Search} from "@element-plus/icons-vue";
import router from "@/router";
import { ElMessage } from 'element-plus'

export default {
  name: "ReceiptEntry",
  data() {
    return {
      Search,
      tableData:[
      ],
      status:'',
      type:'',
      typecase:['送货收款','收款','送货','退货','换货'],
      tvalue:'',
      multipleSelection:[],
      pageSize:8,
      pageNow:1,
      totalSize:100,
      type1:'',
      tvalue1:'',
      Visible:false,
      receiptData:[],
      receiptForm:{},
      rules:{
        customerName:[
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 1,  message: '长度须大于1 ', trigger: 'blur' }
        ],
        address:[
          { required: true, message: '请输入地址', trigger: 'blur' },
          { min: 1,  message: '长度须大于1 ', trigger: 'blur' }
        ],
        tele:[
          { required: true, message: '请输入电话', trigger: 'blur' },
          { min: 1,  message: '长度须大于1 ', trigger: 'blur' }
        ],
        addressID:[
          { required: true, message: '请输入分站', trigger: 'blur' },
          { min: 1,  message: '长度须大于1 ', trigger: 'blur' }
        ],
        taskState:[
          { required: true, message: '请选择任务状态', trigger: 'blur' },
          { min: 1,  message: '长度须大于1 ', trigger: 'blur' }
        ],
        commodityId:[
          { required: true, message: '请输入商品ID', trigger: 'blur' },
          { min: 0,  message: '长度须大于1 ', trigger: 'blur' }
        ],
        commodityNum:[
          { required: true, message: '请输入商品数量', trigger: 'blur' },
        ],
        rate:[
          { required: true, message: '请选择客户满意度', trigger: 'blur' },
        ],


      },
      shoppingList:[
        {
          id:'111',
          num:100
        }
      ]
    }
  },
  methods:{
    search(){
      this.type1 = this.type
      console.log(this.type1)
      this.tvalue1 = this.tvalue
      axios.post("http://localhost:1060/taskOrder/findByConditions",{
        type:this.type,
        date:this.tvalue,
        status:'完成',
        pageSize:this.pageSize,
        pageNow:1,
        isReceipt:0
      }).then(res=>{
        res=res.data
        if (res.code == '200') {
          this.tableData = res.data.rowData
          this.totalSize = res.data.totalRows
          this.pageNow = 1
        } else {
          this.tableData = []
          this.totalSize = 0
        }
      })
    },
    addReceipt(formName) {
      console.log(this.receiptData)
      if (this.receiptData.rate == 0) {
        ElMessage('请将信息补充完整')
      }else {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            axios.post('http://localhost:1060/taskOrder/receiptEntry',this.receiptData).then(res=>{
              this.loadPost()
            })
            this.resetForm('receiptForm')
            this.Visible = false
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }


    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getIndex(index){
      index = index + 1 + (this.pageNow - 1) * this.pageSize
      return index
    },
    forsure(){
      let l = this.multipleSelection;
      if (l == undefined || JSON.stringify(l)=='[]') {
        this.$alert('请选择一条数据！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          }
        });
      }else {
        let oid = this.multipleSelection.orderId
        this.receiptData = this.multipleSelection
        let formData = new FormData();
        formData.append('oid',oid)
        axios.post("http://localhost:1060/taskOrder/findShopping",formData).then(res=>{
          res=res.data;
          console.log(res)
          this.shoppingList = res.data
        })
        this.Visible = true
      }

    },

    distribute(){
      let list = JSON.stringify(this.multipleSelection)
      let formData = new FormData();
      formData.append('distributionTaskOrders',list)
      console.log(list)
      axios.post("http://localhost:1060/taskOrder/findPostmanForOrder",formData).then(res=>{
        this.loadPost()
      })
    },

    pageChange(val){
      this.pageNow = val
      console.log(this.pageNow)
      this.$axios.post("http://localhost:1060/taskOrder/findByConditions",{
        status:'完成',
        date:this.tvalue,
        type:this.type,
        pageNow:this.pageNow,
        pageSize:8,
        isReceipt:0
      }).then(res=>{
        res=res.data
        if (res.code == '200') {
          this.tableData = res.data.rowData
        }else {
        }

      })
    },

    loadPost(){
      this.$axios.post("http://localhost:1060/taskOrder/findByConditions",{
        date:this.tvalue1,
        type:this.type1,
        status:'完成',
        pageNow:this.pageNow,
        pageSize:this.pageSize,
        isReceipt:0
      }).then(res=>{
        this.pageNow = 1
        res=res.data
        if (res.code == '200'){

          this.totalSize = res.data.totalRows
          this.tableData = res.data.rowData
          console.log(this.tableData)
        }else {
          this.tableData = []
          this.totalSize = 0
        }
      })
    },
    selectionChange(val){
      this.multipleSelection = val[0]
    },

    select(selection, row) {
      if (selection.length > 1) {
        let del_row = selection.shift()
        this.$refs.multipleTable.toggleRowSelection(del_row, false)
      }
    },
  },
  beforeMount() {
    this.loadPost()
  }
}
</script>

<style scoped>

.box-card{
  width: 200px;
  height: 100px;
}

</style>